<template>
  <div class="content">
    <div class="topSwiper" ref="topSwiperDiv">
      <el-carousel ref="topSwiper" :interval="0" indicator-position="outside" :height="swiperHeight"
        :autoplay="isautoplay">
        <el-carousel-item v-for="(item,index) in imgList" :key="index">
          <div class="swiper-content">
            <div class="shadow" :style="{backgroundImage:'url(' + item.url + ')'}"></div>
            <div class="content-text">
              <div>
                <h1> 「{{item.name}}」数字藏品发售</h1>
                <hr />
                <br>
                <h1> {{ item.title }}</h1>
              </div>
              <div class="toButton">
                <p>立即前往 <i class="el-icon-right"></i></p>                
              </div>
            </div>
            <div class="swiper-img">
              <el-image :src="item.url" fit="cover"></el-image>
            </div>
          </div>
        </el-carousel-item>
      </el-carousel>

    </div>

  </div>

</template>

<script>
export default {
  name: 'NoticeSwiper',
  data() {
    return {
      itemArr:[],
      imgList: [
      ],
      bgImg: { backgroundImage: "url(" + ("@/image/swiper-03.jpg") + ")" },
      swiperHeight: '500px',
      mouse: "handleMouseEnter",
      isautoplay: true,
    }
  },
  mounted(){
    var items=this.$axios.postInfo("/itemGroups",null)
    items.then((res=>{
      this.itemArr=res.slice(-3)
      console.log(this.itemArr)
      this.itemArr.forEach(  (item) =>{
        this.imgList.push({name:item.name,title:item.title,url:item.url})
        console.log(item.url) 
      })
      console.log(this.imgList)
    }))
    
  },
  methods: {
    next() {
      // this.$refs.underSwiper.next();
      this.$refs.topSwiper.next();
    },
    prev() {
      // this.$refs.underSwiper.prev();
      this.$refs.topSwiper.prev();
    },
    autoplayHandler() {
      this.isautoplay = false
    },
    autoplayActive() {
      this.isautoplay = true
    },
    dom() {
      console.log(this.$refs.divdom.click())
    }
  },

}

</script>
<style  lang="less" scoped>
* {
  margin: 0;
  padding: 0%;
}
.content {
  position: relative;
  width: 100%;
  height: 600px;
 
  .topSwiper {
    position: relative;
    width: 100%;
    min-width: 900px;
    height: 500px;
    z-index: 5;
    

    .swiper-content {
      display: flex;
      width: 100%;
      height: 100%;
      align-items: center;
      justify-content: center;
      overflow: hidden;


      .shadow {
        position: absolute;
        top: 0%;
        width: 100%;
        height: 100%;
        background: no-repeat;
        background-size: cover;
        background-position: 50%;
        background-color: #fff;
        opacity: .3;
        filter: blur(4px);
        z-index: 9;
        -webkit-mask: linear-gradient(#fff, transparent);
      }


      .content-text {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
        width: 40%;
        height: 90%;
        z-index: 99;

        div {
          height: 50%;
        }
        h1{
          font-size: 1.6rem;
        }
        p {
          color: white;
        }

        hr {
          border: none;
          height: 2px;
          background: linear-gradient(90deg, #649aff, #1a5be6b0);
          width: 80%;
          position: relative;
          left: 30px;
        }

        .toButton {
          background: linear-gradient(90deg, #649aff, #1a5be6b0);
          width: 150px;
          height: 40px;
          border-radius: 20px;
          line-height: 40px;
          cursor: pointer;
        }
      }

      .swiper-img {
        width: 50%;
        max-width: 500px;
        min-width: 450px;
        height: 80%;
        display: flex;
        align-items: center;
        justify-content: center;
        overflow: hidden;
        z-index: 99;

        .el-image {
          width: 100%;
          height: 100%;
          border-radius: 20px;
          overflow: hidden;
        }
      }
    }

    .el-carousel {
      width: 100%;


      .el-carousel__item .el-image {
        width: 90%;
        height: 100%;
      }

      .el-carousel__container .el-carousel__arrow {
        background: black;
      }
    }


  }
}
</style>
<style >
.el-carousel__container .el-carousel__arrow {
  background: black;
}

.el-carousel__indicator--horizontal {
  display: inline-block;
  padding: 12px 4px;
}

.el-carousel__indicator button{
  background-color: #1a5be6b0 !important;
  cursor: pointer;
  height: 5px;
  border-radius:10px ;
}
</style>